<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.1/axios.js"></script>
</head>

<body>
    <ul class="list">
        <li></li>
    </ul>
    <button>获取电影</button>
    <button>添加电影</button>
    <button>修改电影</button>
    <button>局部修改</button>
    <button>删除电影</button>
    <script>
        // 获取ul和按钮
        let ul = document.querySelector('ul');
        let btns = document.querySelectorAll('button');

        //获取电影列表
        btns[0].onclick = async function () {
            //   let res = axios('http://api.zhibao.com/movies');
            // //   console.log(res);

            //     res.then(val=>{
            //         console.log(val.data); //arr

            //         ul.innerHTML = '';

            //         val.data.forEach(item => {
            //             ul.innerHTML += `《${item.name}》`;
            //         });

            //     });

            let  {data}  = await axios('http://api.zhibao.com:3000/movies');
            console.log(data);

            data.forEach(item => {
                ul.innerHTML += `《${item.name}》`;
            });
        }

        // 添加电影 - POST 添加
        btns[1].onclick =async function () {
            // 参数1：url
            // 参数2：配置信息
                // method 请求方式
            // axios('http://api.zhibao.com:3000/movies',{
            //     method:'POST',
            //     // 会自己动添加请求头
            //     data:{
            //         name:"刘老根",
            //         director:"赵本山",
            //         star:"药匣子"
            //     }
            // }).then(val=>{
            //     console.log(val);
            // });

           let res = await axios('http://api.zhibao.com:3000/movies',{
                method:"POST",
                data:{
                    name:"熊熊乐园",
                    director:"熊大",
                    star:"光头强"
                }
            });

            console.log(res);


            if(res.status >= 200 && res.status<300){
                console.log("恭喜，添加成功");
            }else{
                console.log("抱歉，添加失败");
            }

        }

        // 修改电影
        btns[2].onclick =async function () {
            // axios('http://api.zhibao.com/movies/5',{
            //     method:'PUT',
            //     data:{
            //         name:"战狼2"
            //     }
            // }).then(val=>{
            //     console.log(val);
            // });

        //    try{
        //     let res = await axios.put('http://api.zhibao.com:3000/movies/9',{
        //         name:"喜洋洋"
        //     });

        //     console.log(res);
        //    }catch(err){
        //         console.log('抱歉，修改失败了原因',err.message);
        //    }
        }

        // 局部修改 - 指定修改哪一条数据
        btns[3].onclick =async function () {
        //    axios('http://api.zhibao.com/movies/5',{
        //         method:"PATCH",
        //         data:{
        //            star:"王传君" 
        //         }
        //    }).then(val=>{
        //        console.log(val);
        //    });

            let res = await axios.patch('http://api.zhibao.com:3000/movies/10',{
                 name:"乡村爱情"
             });

             console.log(res);
            if(res.status===200){
                console.log("修改成功");
            }
        }

        // 删除电影
        btns[4].onclick =async function () {
        //    axios('http://api.zhibao.com/movies/5',{
        //        method:"DELETE"
        //    }).then(val=>{
        //        console.log(val);
        //    });

           let res = await axios.delete('http://api.zhibao.com:3000/movies/9');

           console.log(res);
        }
    </script>
</body>

</html>